<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宠物管理</el-breadcrumb-item>
      <el-breadcrumb-item>宠物列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输宠物名字" clearable v-model="name" @clear="searchPet">
          <el-button slot="append" icon="el-icon-search" @click="searchPet"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible=true">添加宠物</el-button>
      </el-col>
    </el-row>
    <el-table
        ref="multipleTable"
        :data="petList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column label="编号" width="100" prop="id"></el-table-column>
      <el-table-column label="宠物名" width="100" prop="name"></el-table-column>
      <el-table-column label="种类" width="100" prop="category">
        <template slot-scope="scope">
          <span v-if="scope.row.category==1">猫</span>
          <span v-if="scope.row.category==2">狗</span>
        </template>
      </el-table-column>
      <el-table-column label="介绍" width="300" prop="introduce" show-overflow-tooltip></el-table-column>
      <el-table-column label="性别" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.sex==1">雄性</span>
          <span v-if="scope.row.sex==2">雌性</span>
        </template>
      </el-table-column>
      <!--<el-table-column label="照片" width="100" prop="image"></el-table-column>-->
      <el-table-column label="图像" width="180">
        <template slot-scope="scope">
          <img :src="getPetImage(scope.row.image)" style="width: 60px;height: 60px;">
        </template>
      </el-table-column>
      <el-table-column label="救助站" width="100" prop="rescueStation.name"></el-table-column>
      <el-table-column label="领养状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.state==0">未领养</span>
          <span v-if="scope.row.state==1">已领养</span>
        </template>
      </el-table-column>
      <el-table-column label="领养人" width="100" prop="id">
        <template slot-scope="scope">
          <span v-if="scope.row.user!=null" v-text="scope.row.user.username"></span>
          <span v-if="scope.row.user==null">无</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
          <el-button type="danger" size="mini" @click="removePetById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6 , 12, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--添加宠物-->
    <el-dialog title="添加宠物" :visible.sync="addDialogVisible" width="50%" :close-on-click-modal="false"
               @close="addPetFormClose">
      <el-form
          :model="addPetForm"
          :rules="addPetFormRules"
          ref="addPetFormRef"
          label-width="100px"
          class="demo-ruleForm">
        <el-form-item label="宠物名" prop="name">
          <el-input v-model="addPetForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="addPetForm.sex" placeholder="请选择性别">
            <el-option label="雄性" :value="1"></el-option>
            <el-option label="雌性" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="种类" prop="category">
          <el-select v-model="addPetForm.category" placeholder="请选择种类">
            <el-option label="猫" :value="1"></el-option>
            <el-option label="狗" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="救助站" prop="resId">
          <el-select v-model="addPetForm.resId" placeholder="请选择救助站">
            <!--<el-option label="救助站一号" value="1"></el-option>-->
            <el-option v-for="r in RescueStationList" :label="r.name" :value="r.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="introduce">
          <el-input type="textarea" v-model="addPetForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="图像" prop="image">
          <el-input v-model="addPetForm.image" disabled></el-input>
        </el-form-item>
        <el-form-item label="上传图像">
          <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccessAdd"
              :before-upload="beforeAvatarUploadAdd"
              name="file">
            <img v-if="imageUrlAdd" :src="imageUrlAdd" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addPet">确 定</el-button>
                <el-button @click="addDialogVisible = false">取 消</el-button>
            </span>
    </el-dialog>
    <!--修改宠物-->
    <el-dialog title="修改宠物" :visible.sync="editDialogVisible" width="50%" :close-on-click-modal="false"
               @close="editPetFormClose">
      <el-form
          :model="editPetForm"
          :rules="editPetFormRules"
          ref="editPetFormRef"
          label-width="100px"
          class="demo-ruleForm">
        <el-form-item label="宠物名" prop="name">
          <el-input v-model="editPetForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="editPetForm.sex" placeholder="请选择性别">
            <el-option label="雄性" :value="1"></el-option>
            <el-option label="雌性" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="种类" prop="category">
          <el-select v-model="editPetForm.category" placeholder="请选择种类">
            <el-option label="猫" :value="1"></el-option>
            <el-option label="狗" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="救助站" prop="resId">
          <el-select v-model="editPetForm.resId" placeholder="请选择救助站">
            <el-option v-for="r in RescueStationList" :label="r.name" :value="r.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="introduce">
          <el-input type="textarea" v-model="editPetForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="图像" prop="image">
          <el-input v-model="editPetForm.image" disabled></el-input>
        </el-form-item>
        <el-form-item label="上传图像">
          <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccessEdit"
              :before-upload="beforeAvatarUploadEdit"
              name="file">
            <img :src="getPetImage(editPetForm.image)" class="avatar">
            <!--            <i  class="el-icon-plus avatar-uploader-icon"></i>-->
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editPet">确 定</el-button>
                <el-button @click="editDialogVisible = false">取 消</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import Url from '@/plugins/url'

export default {
  name: "PetManagement",
  data() {
    return {
      RescueStationList: [],
      petList: [],
      pageSize: 3,
      pageNum: 1,
      total: 0,
      name: '',
      addDialogVisible: false,
      addPetForm: {
        name: '',
        image: '',
        sex: '',
        category: '',
        resId: '',
        introduce: '',
      },
      addPetFormRules: {
        name: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        image: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        sex: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        category: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        resId: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        introduce: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
      },
      uploadUrl: 'http://localhost:9999/oss/upload',
      imageUrlAdd: '',
      editDialogVisible: false,
      editPetForm: {
        name: '',
        image: '',
        sex: '',
        category: '',
        resId: '',
        introduce: '',
      },
      editPetFormRules: {
        name: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        image: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        sex: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        category: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        resId: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        introduce: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
      },
      imageUrlEdit: '',
    }
  },
  methods: {
    //裁剪地址
    setPetImage(url) {
      // console.log(url);
      return url.substring(url.lastIndexOf("/") + 1);
    },
    //拼接回显图片地址
    getPetImage(img) {
      // console.log(img);
      let url = Url.imgUrl + img;
      return url;
    },
    handleSelectionChange() {

    },
    handleAvatarSuccessAdd(res, file) {
      this.imageUrlAdd = URL.createObjectURL(file.raw);
      this.addPetForm.image = this.setPetImage(res);
    },
    beforeAvatarUploadAdd(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccessEdit(res, file) {
      this.imageUrlEdit = URL.createObjectURL(file.raw);
      this.editPetForm.image = this.setPetImage(res);
    },
    beforeAvatarUploadEdit(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    addPetFormClose() {
      this.addDialogVisible = false;
      this.imageUrlAdd = '';
      this.addPetForm = {};
    },
    addPet() {
      this.$refs.addPetFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "/pet/add";
        this.$axios.post(url, this.addPetForm)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1000
                });
                this.addDialogVisible = false;
                this.initPetList();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      })
    },
    editPetFormClose() {
      this.editDialogVisible = false;
      this.editPetForm = {};
    },
    showEditDialog(row) {
      this.editDialogVisible = true;
      this.editPetForm = row;
      this.imageUrlEdit = this.editPetForm.image;
    },
    editPet() {
      this.$refs.editPetFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        let url = "/pet/modify";
        this.$axios.put(url, this.editPetForm)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1000
                });
                this.editDialogVisible = false;
                this.initPetList();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      })
    },
    removePetById(id) {
      this.$confirm('此操作将删除该宠物, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "pet/del/" + id;
        this.$axios.delete(url)
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1000
                });
                this.initPetList();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNum = 1;
      this.initPetList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initPetList();
    },
    searchPet() {
      this.pageNum = 1;
      this.initPetList();
    },
    initRescueStation() {
      let url = "pet/allRescueStation";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.RescueStationList = res.data.data;
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initPetList() {
      let url = "pet/list";
      this.$axios.get(url, {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          name: this.name
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.petList = res.data.data.list;
          this.pageSize = res.data.data.pageSize;
          this.pageNum = res.data.data.pageNum;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 1000
          })
        }
      })

    }
  },
  created() {
    this.initPetList();
    this.initRescueStation();
  }
}
</script>

<style scoped>

</style>